<template>
  <div class="Invoicing login">
    <div
      class="underline"
      style="width:120px;"
    >
      <span class="title1 color1 zIndex fontBold">发票抬头</span>
    </div>
    <div class="login_content">
      <div class="content">
        <div class="login_field">
          <van-cell-group>
            <van-field
              v-model="form.billing_name"
              center
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">开票名称</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="form.tax"
              center
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">税号</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <!-- <van-field
              v-model="form.billing_address"
              center
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">开票地址</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field> -->
            <!-- <van-field
              v-model="form.bank"
              center
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">开户银行</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field> -->
            <!-- <van-field
              v-model="form.bank_account"
              center
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">银行账号</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field> -->
            <van-field
              v-model="select.billing_type"
              center
              readonly
              is-link
              required
              @click="showType"
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">开票类型</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="form.receive_phone"
              center
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">接收手机号</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <van-field
              v-model="form.email"
              center
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">接收邮箱</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field>
            <!-- <van-field
              v-model="form.mailing_address"
              center
            >
              <template #left-icon>
                <span class="content3 font400 color3 leftw">邮寄地址</span>
                <span class="line content3 font400 color3">|</span>
              </template>
            </van-field> -->
          </van-cell-group>
        </div>
      </div>
    </div>
  </div>
  <div class="fexd_footer">
    <div class="footer_btn flex align_center justify_between">
      <div
        class="font400 content3 color4"
        @click="back"
      >
        <svg
          class="icon"
          aria-hidden="true"
        >
          <use xlink:href="#icon-fanhui" />
        </svg>
        <p class="content2 font400 color3">
          返回
        </p>
      </div>
      <div
        @click="submit"
        class="agree font400 content3 color4"
      >
        提交
      </div>
    </div>
  </div>
  <Choose
    :columns="columns"
    :visible="visible"
    :type="type"
    @closeDialog="closeDialog"
    @confirmValue="confirmValue"
  />
</template>

<script setup lang="ts">
import wx from 'weixin-js-sdk'
import { Dialog, Toast } from 'vant'
import { publishInvoicingt, wechatJsapi, getInvoiceType } from '@/api'
import { ref, defineAsyncComponent } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from 'vuex'
import { throttle } from '@/service/debounce'
const router = useRouter()
const route = useRoute()
const store = useStore()
const visible: any = ref(false)
const columns: any = ref([])
const invoices: any = ref([])
const type: any = ref(0)
const Choose = defineAsyncComponent(() => import('@/components/Choose/index.vue'))
const form: any = ref({
  publish_id: route.query.id,
  billing_name: '',
  billing_address: '',
  tax: '',
  bank: '',
  bank_account: '',
  receive_phone: '',
  billing_type: '',
  mailing_address: '',
  email: ''
})

const select:any = ref({
  billing_type: '请选择'
})

const getInvoiceTitle = async () => {
  console.log(window.location.href.split('#')[0])
  const res:any = await wechatJsapi({ url: window.location.href.split('#')[0] })
  wx.config({
    debug: false,
    appId: res.appId,
    timestamp: res.timestamp,
    nonceStr: res.nonceStr,
    signature: res.signature,
    beta: true,
    jsApiList: ['scanQRCode', 'chooseInvoiceTitle']
  })
  wx.ready(function () {
    wx.invoke('chooseInvoiceTitle', {
      scene: '2'
    }, function (res:any) {
      if (res.err_msg === 'chooseInvoiceTitle:ok') {
        const info = JSON.parse(JSON.stringify(res)).choose_invoice_title_info
        const infoJ = JSON.parse(JSON.parse(JSON.stringify(info)))
        form.value.billing_name = infoJ.title
        form.value.billing_address = infoJ.companyAddress
        form.value.bank = infoJ.bankName
        form.value.bank_account = infoJ.bankAccount
        // form.value.receive_phone = infoJ.telephone
        form.value.tax = infoJ.taxNumber
      }
    })
  })
}

getInvoiceTitle()

const back = () => {
  if (store.state.from.path !== '/') {
    router.back()
  } else {
    router.replace('/')
  }
}

const showType = () => {
  // columns.value = ['增值税专用发票', '增值税普通发票']
  handleGetInvoiceType()
  type.value = 1
  visible.value = true
}

const handleGetInvoiceType = () => {
  getInvoiceType().then((res: any) => {
    invoices.value = res
    columns.value = res.map((item: any) => item.value)
  })
}

handleGetInvoiceType()

const closeDialog = () => {
  visible.value = false
}

const confirmValue = (val: any, type: any) => {
  if (type === 1) {
    invoices.value.forEach((item:any, idnex:any) => {
      if (val === item.value) {
        form.value.billing_type = item.id
        select.value.billing_type = item.value
        console.log(form.value.billing_type, 999, select.value, form.value)
      }
    })
  }
  visible.value = false
}

const submit = throttle(async function () {
  try {
    await publishInvoicingt({ ...form.value })
    Dialog.alert({
      title: '温馨提示',
      message: '申请成功'
    }).then(() => {
      router.push('/otherServices/cost')
    })
  } catch (error:any) {
    Toast(error.message)
  }
}, 5000)

</script>

<style lang="less" scoped>
.Invoicing {
  padding: 0 30px 80px;
  margin-top: 40px;
  .login_content {
    margin-top: 20px;
    .login_field {
      margin-top: 20px;
    }
  }
  .leftw {
    width: 90px;
    display: inline-block;
  }
  .line {
    margin: 0 30px;
  }
  .setBnt {
    width: 98px;
    height: 30px;
    background: #12142e;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
  }
}
.fexd_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
  .footer_btn {
    padding: 0 30px;
    height: 100%;
    text-align: center;
    .agree {
      width: 242px;
      height: 44px;
      background: #ff7a1f;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
    }
    .icon {
      width: 23px;
      height: 23px;
      margin-bottom: 2px;
    }
  }
}

@media (min-width: 750px) {
  .Invoicing {
  padding: 0 30px 80px;
  margin-top: 40px;
  .login_content {
    margin-top: 20px;
    .login_field {
      margin-top: 20px;
    }
  }
  .leftw {
    width: 90px;
    display: inline-block;
  }
  .line {
    margin: 0 30px;
  }
  .setBnt {
    width: 98px;
    height: 30px;
    background: #12142e;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 400;
  }
}
.fexd_footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70px;
  background-color: #fff;
  box-shadow: 0px 2px 12px 2px rgba(22, 12, 6, 0.09);
  .footer_btn {
    padding: 0 30px;
    height: 100%;
    text-align: center;
    .agree {
      width: 242px;
      height: 44px;
      background: #ff7a1f;
      border-radius: 5px;
      text-align: center;
      line-height: 44px;
    }
    .icon {
      width: 23px;
      height: 23px;
      margin-bottom: 2px;
    }
  }
}
}
</style>
